<template>
  <div id="player"></div>
</template>

<script>
import HlsJsPlayer from "xgplayer-hls.js";
export default {
  name: "VideoPlayer",
  props: {
    videoInfo: {
      type: Object
    }
  },
  data() {
    return {
      // 播放器实例
      videoPlayer: null
    };
  },
  // watch: {
  //   videoInfo: {
  //     handler(newV) {
  //       // this.url = newV;
  //       if (newV) {
  //         //   this.videoPlayer.src = "";
  //       }
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      // 初始化
      this.videoPlayer = new HlsJsPlayer({
        id: "player",
        url: this.videoInfo.videoUrl,
        poster: this.videoInfo.videoCover,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        fluid: true,
        cors: true
      });
    }
  },
  destroyed() {
    this.videoPlayer.destroy();
  }
};
</script>

<style scoped>
</style>